<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>主页</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/layout.css">
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/tu.css">
    <link rel="stylesheet" href="css/zi.css">

    
    <style>
        .card {
            margin-top: 1rem;
        }
        video {
      position: fixed;
      right: 0px;
      bottom: 0px;
      min-width: 100%;
      min-height: 100%;
      height: auto;
      width: auto;
    }

    source {
      min-width: 0px;
      min-height: 0px;
      height: auto;
      width: auto;
    }
    .yx{
        opacity:0.8;
        
    }
    body {
  margin: 0;
  padding: 0;
}
.left {
  position: absolute;
  height: 100%;
  width: 50%;
  background: #FFCA95;
}
.right {
  position: absolute;
  left: 50%;
  height: 100%;
  width: 50%;
  background: #20314E;
}
.cat {
  height: 182px;
  width: 200px;
  position: absolute;
  top: 50%;
  right: 145px;
  transform: translate(0, -50%);
}
.cat .ears1 {
  height: 0;
  width: 0;
  position: relative;
  left: 90px;
  border-bottom: 27px solid #475881;
  border-left: 10px solid transparent;
  border-right: 23px solid transparent;
}
.cat .ears1::before {
  display: block;
  content: "";
  height: 0;
  width: 0;
  position: relative;
  left: 24px;
  border-bottom: 27px solid #475881;
  border-left: 10px solid transparent;
  border-right: 23px solid transparent;
}
.cat .head1 {
  height: 74px;
  width: 135px;
  position: relative;
  left: 65px;
  z-index: 2;
  box-shadow: -8px 0 0 #475881;
  border-radius: 37px;
  background: #7C85AB;
}
.cat .head1 .eyes1 {
  height: 12px;
  width: 12px;
  position: relative;
  top: 37px;
  left: 64px;
  border-radius: 100%;
  animation: 9s catRead infinite;
  background: black;
}
.cat .head1 .eyes1::before {
  display: block;
  content: "";
  height: 12px;
  width: 12px;
  position: relative;
  left: 18px;
  border-radius: 100%;
  background: black;
}
.cat .head1 .nose1 {
  height: 22px;
  width: 22px;
  position: relative;
  top: 40px;
  left: 60px;
  border-radius: 20px;
  background: #FBF1D8;
}
.cat .head1 .nose1::before {
  display: block;
  content: "";
  height: 22px;
  width: 22px;
  position: relative;
  left: 22px;
  border-radius: 20px;
  background: #FBF1D8;
}
.cat .head1 .nose1::after {
  display: block;
  content: "";
  height: 0;
  width: 0;
  position: relative;
  top: -22px;
  left: 12px;
  border-radius: 10px;
  border-top: 10px solid #FFA5C0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
}
.cat .body1 {
  height: 110px;
  width: 200px;
  position: relative;
  top: -30px;
  z-index: 1;
  border-radius: 55px;
  background: #7C85AB;
}
.cat .body1 .left-paw1 {
  height: 25px;
  width: 37px;
  position: relative;
  top: 70px;
  left: 95px;
  border-radius: 12px;
  animation: 9s catLeftType infinite;
  background: #FBF1D8;
}
.cat .body1 .right-paw1 {
  height: 25px;
  width: 37px;
  position: relative;
  top: 45px;
  left: 142px;
  border-radius: 12px;
  animation: 9s catRightType infinite;
  background: #FBF1D8;
}
.cat .tail1 {
  height: 24px;
  width: 80px;
  position: relative;
  top: -54px;
  left: -31px;
  z-index: 0;
  border-radius: 17px 0 0 17px;
  background: #475881;
}
.cat .PRlaptop {
  position: relative;
  top: -151px;
  left: 170px;
  z-index: 2;
}
.cat .PRlaptop .PRscreen {
  height: 85px;
  width: 130px;
  border-radius: 8px;
  transform: skew(-18deg);
  background: #20314E;
}
.cat .PRlaptop .PRscreen::before {
  display: block;
  content: "";
  height: 17px;
  width: 10px;
  position: relative;
  top: 38px;
  left: 56px;
  border-radius: 6px;
  background: #475881;
}
.cat .PRlaptop .PRscreen::after {
  display: block;
  content: "";
  height: 17px;
  width: 10px;
  position: relative;
  top: 21px;
  left: 70px;
  border-radius: 6px;
  background: #475881;
}
.cat .PRlaptop .PRkeyboard {
  height: 12px;
  width: 132px;
  position: relative;
  left: -14px;
  border-radius: 0 6px 6px 0;
  background: #475881;
}
.cat .PRlaptop .PRkeyboard::before {
  display: block;
  content: "";
  height: 12px;
  width: 72px;
  position: relative;
  left: -68px;
  border-radius: 6px;
  background: #20314E;
}
.dog {
  height: 182px;
  position: absolute;
  top: 50%;
  left: 145px;
  transform: translate(0, -50%);
}
.dog .ears2 {
  height: 0;
  width: 0;
  position: relative;
  left: 30px;
  border-bottom: 27px solid #F07E42;
  border-left: 23px solid transparent;
  border-right: 10px solid transparent;
}
.dog .ears2::before {
  display: block;
  content: "";
  height: 0;
  width: 0;
  position: relative;
  left: 33px;
  border-bottom: 27px solid #F07E42;
  border-left: 10px solid transparent;
  border-right: 23px solid transparent;
}
.dog .head2 {
  height: 74px;
  width: 140px;
  position: relative;
  z-index: 2;
  box-shadow: 8px 0 0 #F07E42;
  border-radius: 35px;
  background: #FFA852;
}
.dog .head2 .eyes2 {
  height: 12px;
  width: 12px;
  position: relative;
  top: 37px;
  left: 50px;
  border-radius: 100%;
  animation: 9s dogRead infinite;
  background: black;
}
.dog .head2 .eyes2::before {
  display: block;
  content: "";
  height: 12px;
  width: 12px;
  position: relative;
  left: 18px;
  border-radius: 100%;
  background: black;
}
.dog .head2 .nose2 {
  height: 30px;
  width: 45px;
  position: relative;
  top: 40px;
  left: 37px;
  border-radius: 20px;
  background: #FBF1D8;
}
.dog .head2 .nose2::before {
  display: block;
  content: "";
  height: 0;
  width: 0;
  position: relative;
  top: 3px;
  left: 9px;
  border-radius: 10px;
  border-top: 10px solid black;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
}
.dog .body2 {
  height: 110px;
  width: 200px;
  position: relative;
  top: -30px;
  z-index: 1;
  border-radius: 55px;
  background: #FFA852;
}
.dog .body2 .left-paw2 {
  height: 25px;
  width: 37px;
  position: relative;
  top: 70px;
  left: 15px;
  border-radius: 12px;
  animation: 9s dogLeftType infinite;
  background: #FBF1D8;
}
.dog .body2 .right-paw2 {
  height: 25px;
  width: 37px;
  position: relative;
  top: 45px;
  left: 60px;
  border-radius: 12px;
  animation: 9s dogRightType infinite;
  background: #FBF1D8;
}
.dog .tail2 {
  height: 34px;
  width: 70px;
  position: relative;
  top: -64px;
  left: 150px;
  z-index: 0;
  border-radius: 0 17px 17px 0;
  background: #F07E42;
}
.dog .ORlaptop {
  position: relative;
  top: -161px;
  left: -103px;
  z-index: 2;
}
.dog .ORlaptop .ORscreen {
  height: 85px;
  width: 130px;
  border-radius: 8px;
  transform: skew(18deg);
  background: #FFCA95;
}
.dog .ORlaptop .ORscreen::before {
  display: block;
  content: "";
  height: 17px;
  width: 10px;
  position: relative;
  top: 38px;
  left: 50px;
  border-radius: 6px;
  background: #F07E42;
}
.dog .ORlaptop .ORscreen::after {
  display: block;
  content: "";
  height: 17px;
  width: 10px;
  position: relative;
  top: 21px;
  left: 64px;
  border-radius: 6px;
  background: #F07E42;
}
.dog .ORlaptop .ORkeyboard {
  height: 12px;
  width: 132px;
  position: relative;
  left: 14px;
  border-radius: 6px 0 0 6px;
  background: #F07E42;
}
.dog .ORlaptop .ORkeyboard::before {
  display: block;
  content: "";
  height: 12px;
  width: 72px;
  position: relative;
  left: 128px;
  border-radius: 6px;
  background: #FFCA95;
}
@keyframes catLeftType {
  2% {
    transform: translateY(-8px);
  }
  6% {
    transform: none;
  }
  8% {
    transform: translateY(-8px);
  }
  10% {
    transform: none;
  }
  14% {
    transform: translateY(-8px);
  }
  16% {
    transform: none;
  }
  18% {
    transform: translateY(-8px);
  }
  20% {
    transform: none;
  }
  22% {
    transform: translateY(-8px);
  }
  26% {
    transform: none;
  }
}
@keyframes catRightType {
  6% {
    transform: translateY(-8px);
  }
  8% {
    transform: none;
  }
  10% {
    transform: translateY(-8px);
  }
  12% {
    transform: none;
  }
  16% {
    transform: translateY(-8px);
  }
  18% {
    transform: none;
  }
  20% {
    transform: translateY(-8px);
  }
  22% {
    transform: none;
  }
  24% {
    transform: translateY(-8px);
  }
  28% {
    transform: none;
  }
}
@keyframes catRead {
  55% {
    transform: none;
  }
  62% {
    transform: translateX(-2px);
  }
  70% {
    transition-timing-function: ease-out;
    transform: translateX(3px);
  }
  82% {
    transform: translateX(-2px);
  }
  90% {
    transition-timing-function: ease-out;
    transform: translateX(3px);
  }
  100% {
    transform: none;
  }
}
@keyframes dogLeftType {
  50% {
    transform: none;
  }
  52% {
    transform: translateY(-8px);
  }
  56% {
    transform: none;
  }
  58% {
    transform: translateY(-8px);
  }
  60% {
    transform: none;
  }
  64% {
    transform: translateY(-8px);
  }
  66% {
    transform: none;
  }
  68% {
    transform: translateY(-8px);
  }
  70% {
    transform: none;
  }
  72% {
    transform: translateY(-8px);
  }
  76% {
    transform: none;
  }
}
@keyframes dogRightType {
  54% {
    transform: none;
  }
  56% {
    transform: translateY(-8px);
  }
  58% {
    transform: none;
  }
  60% {
    transform: translateY(-8px);
  }
  62% {
    transform: none;
  }
  66% {
    transform: translateY(-8px);
  }
  68% {
    transform: none;
  }
  70% {
    transform: translateY(-8px);
  }
  72% {
    transform: none;
  }
  74% {
    transform: translateY(-8px);
  }
  78% {
    transform: none;
  }
}
@keyframes dogRead {
  5% {
    transform: none;
  }
  17% {
    transition-timing-function: ease-out;
    transform: translateX(-5px);
  }
  25% {
    transform: none;
  }
  37% {
    transition-timing-function: ease-out;
    transform: translateX(-5px);
  }
  45% {
    transform: none;
  }
}
    </style>
</head>

<body>            
    <div class='left'>
        <div class='cat'>
          <div class='ears1'></div>
          <div class='head1'>
            <div class='eyes1'></div>
            <div class='nose1'></div>
          </div>
          <div class='body1'>
            <div class='left-paw1'></div>
            <div class='right-paw1'></div>
          </div>
          <div class='tail1'></div>
          <div class='PRlaptop'>
            <div class='PRscreen'></div>
            <div class='PRkeyboard'></div>
          </div>
        </div>
      </div>
      <div class='right'>
        <div class='dog'>
          <div class='ears2'></div>
          <div class='head2'>
            <div class='eyes2'></div>
            <div class='nose2'></div>
          </div>
          <div class='body2'>
            <div class='left-paw2'></div>
            <div class='right-paw2'></div>
          </div>
          <div class='tail2'></div>
          <div class='ORlaptop'>
            <div class='ORscreen'></div>
            <div class='ORkeyboard'></div>
          </div>
        </div>
      </div>
    <!-- 顶框 -->
    <div class="container yx" style="margin-left:22rem;">
        <div class="row">            
            <div class="col-sm">
                <div class="card" style="width: 50rem;">
                    <div class="card-header" style="background-color: #FBF1D8;">
                        <div class="row">
                            <div class="col-sm-4 d-flex justify-content-start">
                                <button type="button" class="btn btn-secondary btn-sm badge badge-pill badge-secondary" data-toggle="modal"
                                    data-target="#saysomething" style="width: 4rem; height: 2.5rem;">发表说说</button>
                            </div>
                            <div class="col-sm-4 d-flex justify-content-center">
                                <p>当前用户：{{username}}</p>
                            </div>
                            <div class="col-sm-4 d-flex justify-content-end"><button type="button"
                                    class="btn btn-secondary btn-sm badge badge-pill badge-secondary" onclick="logout()" 
                                    style="width: 4rem; height: 2.5rem;">注销</button>
                            </div>
                        </div>
                    </div>
                </div>          
            </div>
        </div>

        <!-- 说说页 -->
        <div class="row">     
            <div class="col-sm" id="saysayMsg">
                {% for msg in msgs %}
                <div class="card border-primary shadow" style="width: 50rem;">
                    <div class="card-header" style="background-color: #FBF1D8;">
                        <div class="row">                           
                            <div class="col-sm-10"><font style="color:dodgerblue" name="msgName"
                                id="msgName">{{msg.msgUserName}}</font>发表了说说：{{msg.content}}</div>
                            <div class="col-sm-2"><button type="button" class="btn btn-secondary btn-sm" data-toggle="modal"
                                data-target="#comment" onclick="msgCommit('{{msg.id}}')">评 论 一 下</button>
                            </div>
                        </div>
                    </div>
                    <div class="card-body" style="background-color: #FBF1D8;">
                        <ul class="list-group list-group-flush" id="{{msg.id}}">
                            {% for cmot in msg.comments %}
                            <li class="list-group-item">
                                <blockquote class="blockquote mb-0">
                                    <p>{{cmot.content}}</p>
                                    <footer class="blockquote-footer">
                                        <cite title="Source Title">{{cmot.comUserName}}</cite>&nbsp;&nbsp;对
                                        <cite title="Source Title">{{msg.msgUserName}}</cite>&nbsp;&nbsp;说
                                    </footer>

                                </blockquote>
                            </li>                          
                            {% endfor %}
                        </ul>
                    </div>     
                </div>
                {% endfor %}
            </div>       
        </div>       
    </div>

    <!-- 发表说说  -->
    <div class="modal fade yx" id="saysomething" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header" style="background-color: #FBF1D8;">
                    <h5 class="modal-title" id="exampleModalLabel">发表说说</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body" style="background-color: #FBF1D8;">
                    <form>
                        <div class="form-group">
                            <input type="text"  class="form-control" name="msgSay"
                            id="msgSay">
                            <!-- <small id="passwordHelpInline" class="text-muted">
                            Must be 8-20 characters long.
                          </small> -->
                        </div>
                    </form>
                </div>
                <div class="modal-footer" style="background-color: #FBF1D8;">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" data-dismiss="modal" onclick="say()">发表</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 评论一下 -->
    <div class="modal fade yx" id="comment" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header" style="background-color: #FBF1D8;">
                    <h5 class="modal-title" id="exampleModalLabel">评 论 一 下</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body" style="background-color: #FBF1D8;">
                    <form>
                        <div class="form-group">
                            <input type="text"  class="form-control" id="commentText">
                            <!-- <small id="passwordHelpInline" class="text-muted">
                            Must be 8-20 characters long.
                          </small> -->
                        </div>
                    </form>
                </div>
                <div class="modal-footer" style="background-color: #FBF1D8;">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" data-dismiss="modal" onclick="saveComment()">评论</button>
                </div>
            </div>
        </div>
    </div>


    <div id="bottom" style="width:1000px;margin:0 auto; padding:20px 0;">
        <a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=35052402000274" style="display:inline-block;text-decoration:none;height:20px;line-height:20px;"><img src="imgs/备案图标.png" style="float:left;"/><p style="float:left;height:20px;line-height:20px;margin: 0px 0px 0px 5px; color:black;">闽公网安备 35052402000274号</p></a>
    
        <a target="_blank" href="https://beian.miit.gov.cn/#/Integrated/index" style="display:inline-block;text-decoration:none;height:20px;line-height:20px;"><img src="" style="float:left;"/><p style="float:left;height:20px;line-height:20px;margin: 0px 0px 0px 5px; color:black;">备案号 : 闽ICP备2020020512号-1</p></a>
    </div>

    <script src="js/jquery-3.6.0.min.js"></script>
    <script src="js/bootstrap.min.js"></script>

    <script>
        let currentMsgId = '';
        function logout() {
            $.ajax({
                url: "/logout",
                type: "POST",
                dataType: "json",
                success: function (res) {
                    console.log(res);
                    if (res.code === 200) {
                        window.location.href = "/questionnaire";
                    }
                },
                error: function (msg) {
                    console.log('网络或者服务器有问题');
                }
            })
        }
        function say() {
            let data = {
                msgSay: $('#msgSay').val()
            }
            $.ajax({
                url: "/say",
                type: "POST",
                dataType: "json",
                data: data,
                success: function (res) {
                    console.log(res);
                    if (res.code === 200) {
                        let data = JSON.parse(res.data);      
                        // console.log(data);
                        let html = `
                        <div class="card border-primary shadow" style="width: 50rem;">
                            <div class="card-header">
                                <div class="row">
                                    <div class="col-sm-10">${data.content}</div>
                                    <div class="col-sm-2"><button type="button" class="btn btn-secondary btn-sm"
                                            data-toggle="modal" data-target="#comment"
                                            onclick="msgCommit(${data.id})">评 论 一 下</button>
                                    </div>
                                </div>

                            </div>
                            <div class="card-body">
                                <ul class="list-group list-group-flush" id="${data.id}">
                                   
                                </ul>

                            </div>
                        </div>
                        `;
                        $("#saysayMsg").prepend(html);
                        
                    }
                },
                error: function (msg) {
                    console.log('网络或者服务器有问题');
                }
            })
        }
        function msgCommit(msgId) {
            currentMsgId = msgId;
        }
        function saveComment() {

            let data = {
                msgId: currentMsgId,
                content: $('#commentText').val()
            }
            $.ajax({
                url: "/comment",
                type: "POST",
                dataType: "json",
                data: data,
                success: function (res) {
                    console.log(res);
                    if (res.code === 200) {
                        let data=res.data;
                        console.log(data);
                        let html=`
                            <li class="list-group-item">
                                <blockquote class="blockquote mb-0">
                                    <p>${data.content}</p>
                                    <footer class="blockquote-footer">
                                        <cite title="Source Title">${data.fromUserName}</cite>&nbsp;&nbsp;对
                                        <cite title="Source Title">${data.toUserName}</cite>&nbsp;&nbsp;说
                                    </footer>
                                </blockquote>
                            </li>
                        `;
                        $("#" + currentMsgId).append(html);
                        // window.location.href="/login";
                    }
                },
                error: function (msg) {
                    console.log('网络或者服务器有问题');
                }
            });
        }
    </script>
</body>

</html>